import React, { useState } from 'react';
import KeyManager from './components/KeyManager';
import ServerConnection from './components/ServerConnection';
import KeyUploader from './components/KeyUploader';
import { FaKey, FaServer, FaUpload, FaCheck } from 'react-icons/fa';
import './App.css';

function App() {
  const [currentStep, setCurrentStep] = useState(1);
  const [keyExists, setKeyExists] = useState(false);
  const [sshConnected, setSshConnected] = useState(false);
  const [serverInfo, setServerInfo] = useState({
    hostname: '',
    port: '22',
    username: '',
    password: ''
  });

  const handleKeyStatusChange = (exists) => {
    setKeyExists(exists);
    if (exists) {
      setCurrentStep(2);
    }
  };

  const handleConnectionStatusChange = (connected) => {
    setSshConnected(connected);
    if (connected) {
      setCurrentStep(3);
    }
  };

  const handleServerInfoChange = (info) => {
    setServerInfo(info);
  };

  const handleInputChange = (name, value) => {
    setServerInfo({
      ...serverInfo,
      [name]: value
    });
  };

  return (
    <div className="app-container">
      <h1 className="center-title">SSH免密配置工具</h1>
      
      <div className="step-indicator">
        <div className={`step ${currentStep >= 1 ? 'current' : ''} ${currentStep > 1 ? 'completed' : ''}`}>
          <div className="step-number">
            {currentStep > 1 ? <FaCheck /> : 1}
          </div>
          <div className="step-title">生成SSH密钥</div>
          <div className="step-line"></div>
        </div>
        <div className={`step ${currentStep >= 2 ? 'current' : ''} ${currentStep > 2 ? 'completed' : ''}`}>
          <div className="step-number">
            {currentStep > 2 ? <FaCheck /> : 2}
          </div>
          <div className="step-title">连接服务器</div>
          <div className="step-line"></div>
        </div>
        <div className={`step ${currentStep >= 3 ? 'current' : ''} ${currentStep > 3 ? 'completed' : ''}`}>
          <div className="step-number">
            {currentStep > 3 ? <FaCheck /> : 3}
          </div>
          <div className="step-title">上传公钥</div>
          <div className="step-line"></div>
        </div>
      </div>
      
      <div className="section">
        <KeyManager onKeyStatusChange={handleKeyStatusChange} />
      </div>
      
      {currentStep >= 2 && (
        <div className="section">
          <ServerConnection 
            onConnectionStatusChange={handleConnectionStatusChange} 
            serverInfo={serverInfo} 
            onServerInfoChange={handleServerInfoChange} 
          />
        </div>
      )}
      
      {currentStep >= 3 && (
        <div className="section">
          <KeyUploader sshConnected={sshConnected} serverInfo={serverInfo} />
        </div>
      )}
    </div>
  );
}

export default App;